<template name="info">
	<view class="content">
		<!--banner 图片-->
		<view class="page-section swiper">
			<view class="page-section-spacing">
				<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
				 :autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!--搜索框-->
		<view class="cu-bar search">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
			</view>
		</view>

		<view class="cu-card article" v-for="item in list">
			<view class="cu-item shadow">
				<view class="bus-no">{{item.name}}</view>
				<view class="content">
					<view class="desc">
						<view class="station"><text class="tit">{{item.start}} - {{item.end}}</text></view>
						<view class="solid-bottom">
							<view class='cu-tag bg-white'>
								<view class="medium bg-green oval">首</view>
								<text class="timer margin-lr-xs">{{item.first_time}}</text>
							</view>
							<view class='cu-tag bg-white'>
								<view class="medium bg-red oval">末</view>
								<text class="timer margin-lr-xs">{{item.tail_time}}</text>
							</view>
							<view class="cu-tag bg-white timer">票价:{{item.money}}元</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}],
				list: [{
					"id": "1",
					"name": "902路",
					"start": "长沙中南大学学生公寓",
					"end": "左家垅",
					"first_time": "06:30",
					"tail_time": "10:30",
					"money": "2"
				}, {
					"id": "2",
					"name": "115路",
					"start": "白鸽咀",
					"end": "涉外经济学院东南门",
					"first_time": "06:00",
					"tail_time": "11:00",
					"money": "2"
				}, {
					"id": "3",
					"name": "118路",
					"start": "五一广场",
					"end": "保利体育公园",
					"first_time": "07:00",
					"tail_time": "10:30",
					"money": "2"
				}],
				index: 0,
				news: [],
				indicatorDots: true,
				autoplay: true, //是否自动切换
				interval: 2000, //自动切换时间间隔
				duration: 500 //滑动动画时长
			}
		},
		onLoad() {
			uni.request({
				url: 'https://unidemo.dcloud.net.cn/api/news',
				method: 'GET',
				data: {},
				success: res => {
					this.news = res.data;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {

			openinfo(e) {
				var newsid = e.currentTarget.dataset.newsid;
				uni.navigateTo({
					url: '../info/info?newsid=' + newsid
				});
			},

			bindPickerChange: function() {
				console.log("sdfsd");
			}

		}
	}
</script>

<style>
	.uni-media-list-body {
		height: auto;
	}

	.article {
		margin-top: -15px;
	}

	.uni-media-list-text-top {
		line-height: 1.6em;
	}

	.search {
		border-radius: 8px;
	}

	.search-form {
		background-color: #FFFFFF;
	}

	.bus-no {
		font-size: 19px;
		font-weight: 600;
		color: var(--black);
		line-height: 55px;
		padding: 0 16px;
	}

	.station {
		padding: 0px 0px 5px;
		font-size: 15px;
	}

	.tit {
		font-size: 13px;
		color: #959595;
	}

	.oval {
		border-radius: 4px;
	}

	.medium {
		font-size: 12px;
		padding: 0px 12px;
		height: 20px;
		line-height: 20px;
	}

	.cu-tag {
		padding: 0px;
	}

	.timer {
		font-size: 13px;
		font-weight: 400;
	}

	.bg-green {
		background-color: #70cc5d;
	}

	.bg-red {
		background-color: #ff7f7f;
	}
</style>
